<template>
  <div class="userDialog-container">
    <el-dialog
     :visible="userVisible"
     :title="userTitle"
     :close-on-click-modal="false"
     @close="handleClose"
     width="50%"
    >
      <el-form
        ref="userInfoForm"
        :model="userForm"
        :rules="rule"
        label-width="100px"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="userForm.username" placeholder="请输入用户名"/>
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="userForm.nickname" placeholder="请输入昵称"/>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="userForm.sex">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="关联角色" prop="role">
          <el-select v-model="userForm.roleName" placeholder="请选择" style="width: 100%">
            <el-option label="超级管理员" value="超级管理员" :key="0"></el-option>
            <el-option label="管理员" value="管理员" :key="1"></el-option>
            <el-option label="普通用户" value="普通用户" :key="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门" prop="deptName">
          <el-input v-model="userForm.deptName" placeholder="请输入部门"/>
        </el-form-item>
        <el-form-item label="手机号" prop="photo">
          <el-input v-model="userForm.photo" placeholder="请输入手机号"/>
        </el-form-item>
        <el-form-item label="账户密码" >
          <el-input v-model="userForm.password"
                    placeholder="请输入账户密码,如果不输入默认123456"
                    type="password" clearable/>
        </el-form-item>
        <el-form-item label="用户状态" >
          <el-switch v-model="userForm.status" inline-prompt active-text="启用" inactive-text="禁用"></el-switch>
        </el-form-item>
        <el-form-item label="用户描述" prop="describe" >
          <el-input v-model="userForm.describe"
                    type="textarea"
                    placeholder="请输入用户描述"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'userDialog',
  props:{
    userTitle:{
      type: String,
      default: '用户信息',
    },
    dialogVisible:{
      type: Boolean,
      default: false,
    },
    deptName:{
      type: String,
      default: '研发部',
    },
    userInfo:{
      type: Object,
      default: () =>{}
    }
  },
  data(){
    return{
      userVisible: false,
      userForm: {
        username: null,
        nickname: null,
        sex:'男',
        roleName: null,
        role: null,
        status:false,
        photo: null,
        describe: null,
        createTime: null,
        deptName: null,
        password: null,
      },
      rule:{
        nickname: [
          { required: true, message: '请输入昵称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' },
        ],
        username: [{ required: true, message: '请输入', trigger: 'blur' }],
        roleName: [{required: true, message: '请选择角色', trigger: 'change',},],
        sex: [{required: true, message: '请选择性别', trigger: 'change',},],
      }
    }
  },
  watch:{
    dialogVisible:{
      deep: true,
      handler(val){
        this.userVisible = val
      }
    },
    userInfo:{
      deep: true,
      handler(val){
        if(val.username){
          Object.keys(val).forEach(key =>{
            this.userForm[key] = val[key]
            this.userForm.deptName = this.deptName
            this.password = ''
          })
        }
      },
    }
  },
  methods:{
    resetForm(){
      Object.keys(this.userForm).forEach(key =>{
        if(key == 'sex'){
          this.userForm[key] = '男'
        }else{
          this.userForm[key] = null
        }
      })
    },
    handleClose() {
      this.$emit('update:dialogVisible',false)
      this.$refs['userInfoForm'].resetFields()
      this.resetForm()
    },
    handleSubmit () {
      if(this.userTitle.indexOf('新增') > -1){
        this.$emit('closeDialog', {
          ...this.userForm,
          createTime: '2023-08-14 11:01:34',
          type: 'add'
        })
      }else{
        this.$emit('closeDialog', {
          ...this.userForm,
          type: 'edit'
        })
      }
      this.$refs['userInfoForm'].resetFields()
      this.resetForm()
    }
  },
}
</script>

<style lang="scss" scoped>
.userDialog-container{
  .el-dialog__wrapper{
    text-align: left;
    .el-dialog{
      margin-top: 100px;
    }
  }
}
</style>
<style lang="scss">
.userDialog-container{
  .el-dialog__wrapper{
    .el-dialog{
      margin-top: 50px !important;
    }
  }
}
</style>
